import classNames from 'classnames'
import { UseFormRegisterReturn } from 'react-hook-form'
import styles from './CustomInput.module.scss'

type InputType = 'email' | 'number' | 'password' | 'text'
type IconPosition = 'left' | 'right'

interface InputProps {
  className?: string
  iconName?: string
  iconPosition?: IconPosition
  id?: string
  isLabelVisible?: boolean
  label?: string
  name?: string
  placeholder?: string
  register?: UseFormRegisterReturn<string>
  type: InputType
}

export const CustomInput = ({
  className,
  iconName,
  iconPosition = 'left',
  id,
  isLabelVisible = true,
  label,
  name,
  placeholder,
  register,
  type,
}: InputProps) => {
  return (
    <div className={classNames(styles['input-box'], className)}>
      {isLabelVisible && (
        <label className={styles.label} htmlFor={id}>
          {label}
        </label>
      )}
      <div className={styles.inputWrapper}>
        {iconName && iconPosition === 'left' && (
          <span className={classNames(styles['icon-left'], 'material-symbols-rounded')}>
            {iconName}
          </span>
        )}
        <input
          className={classNames(styles.input, {
            [styles.withIconLeft]: iconName && iconPosition === 'left',
            [styles.withIconRight]: iconName && iconPosition === 'right',
          })}
          id={id}
          name={name}
          type={type}
          {...register}
          placeholder={placeholder}
        />
        {iconName && iconPosition === 'right' && (
          <span className={classNames(styles['icon-right'], 'material-symbols-rounded')}>
            {iconName}
          </span>
        )}
      </div>
    </div>
  )
}
